// 之前学习的 那些生命周期函数都是属于 类组件
// 从v16.8+开始， 
// 1. 函数组件 结合useState也可以写状态变量，可以更改页面了
// 2. 函数助教 结合useEffect 副作用（side effect），可以模拟之前类组件的各种生命周期函数。主打写法更简洁
// 在React中，useEffect 是一个Hook，用于在函数组件中执行副作用操作。副作用（Side Effects）是指那些在函数执行过程中，除了返回值之外，还会对外部世界（如DOM、网络请求、订阅或本地存储等）产生影响的操作。这些操作既不是纯粹的函数计算，也不局限于组件的渲染逻辑本身。
//具体到useEffect中的副作用，它们可以包括但不限于以下几种：
// 修改DOM：直接操作DOM元素，比如改变元素的样式、内容或属性。
// 发起网络请求：例如使用fetch或axios进行Ajax调用，从服务器获取数据。
// 订阅或取消订阅：比如订阅WebSockets、事件监听器（如窗口大小变化事件）或第三方库的通知。
// 操作浏览器存储：如localStorage、sessionStorage或IndexedDB，用于在客户端存储数据。
// 调用其他库或API：这些库或API可能涉及到定时器（如setTimeout或setInterval）、画布绘图（如使用Canvas API）、媒体播放（如使用Audio或Video元素）等。
// 手动更改React状态之外的值：虽然React鼓励使用状态（state）和属性（props）来管理组件的数据流，但在某些情况下，开发者可能需要直接修改一些React无法直接追踪的值。
//重要的是，useEffect中的副作用操作应该在函数组件卸载或依赖项变化时适当地进行清理，以避免内存泄漏或意外的行为。这通常通过在useEffect的返回函数中执行清理逻辑来实现。
import { useState, useEffect } from "react"
function Header(){
  const [count, setCount] = useState(0)
  //相当于类组件的componentDidMount挂载的时候执行函数
  //更新页面是，也会触发useEffect,相当于类组件的componentDidUpdate
  useEffect(() =>{
    //这个hook里面写的是各种副作用
    console.log('useEffect什么时候执行');
    document.title = `当前页面修改了${count}次`
//     console.log('useEffect什么时候执行')：这是一个简单的副作用，用于在控制台输出信息。虽然它不会直接影响用户界面，但它是一种调试或日志记录的方式。
// document.title = 当前页面修改了${count}次``：这是直接操作DOM的副作用，它改变了浏览器标签页的标题。这里的count变量（假设它是组件的状态之一）被用来动态更新标题，展示了React状态与DOM操作之间的交互。
  })
  return(
    <>
     <h3>状态变量：{count}</h3>
     <button onClick={() => setCount(count+1)}>修改数据</button>
    </>
  )
}
function App(){
  return(
    <>
      <Header/>
    </>
  )
}
export default App